import { useEffect, useState } from "react";
import "./App.css";
import Markdown from "react-markdown";

function App() {
  const [count, setCount] = useState(0);
  const markdown = `
# Your markdown here
`;

  const renderMd = (status: string) => {
    return (
      <>
        {Object.is(status, "answer") && (
          <Markdown
            components={{
              // Use h2s instead of h1s
              h1: "h2",
              // Use a component instead of hrs
              a(props) {
                return <a {...props} />;
              },
            }}
          >
            {markdown}
          </Markdown>
        )}
      </>
    );
  };

  return (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      {renderMd("answer")}
    </>
  );
}

export default App;
